<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first"></el-tab-pane>
      <el-tab-pane label="配置管理" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName === 'first'">
      <avue-form :option="option" v-model="form"></avue-form>
      <avue-crud :option="tableOption" v-model="form" :data="tableData" @on-load="onLoad"></avue-crud>
    </div>
    <div v-if="activeName === 'second'">
      <avue-form :option="option" v-model="form1"></avue-form>
      <avue-crud :option="tableOption" v-model="form" :data="tableData" @on-load="onLoad1"></avue-crud>
    </div>
  </div>
</template>

<script>
import {validatenull} from '@/utils/validate'
export default{
  data() {
    let startTime = (rule, value, callback)=>{
      if (value === '') {
        callback(new Error('请输入开始时间'));
      }  else{
        if (!validatenull(this.form.endTime) ){
          let sTime = new Date(this.form.startTime.replace('-','/')).getTime()
          let eTime = new Date(this.form.endTime.replace('-','/')).getTime()
          if (sTime > eTime){
            callback(new Error('开始时间不能大于结束时间'));
            this.form.startTime = ''
          }
        }else{
          callback();
        }
      }
    };
    let endTime = (rule, value, callback)=>  {
      if (value === '') {
        callback(new Error('请输入结束时间'));
      } else{
        if (!validatenull(this.form.startTime) ){
           let sTime = new Date(this.form.startTime.replace('-','/')).getTime()
           let eTime = new Date(this.form.endTime.replace('-','/')).getTime()
           if (eTime < sTime){
             callback(new Error('结束时间不能小于开始时间'));
             this.form.endTime = ''
           }
        }else{
          callback();
        }
      }
    };
    return {
      form:{
        startTime:'2023-03-01',
        endTime:''
      },
      form1:{
        startTime:'',
        endTime:''
      },
      tableData:[
        {
          startTime:'2021-02-03',
          endTime:'2021-02-08'
        },{
          startTime:'2021-02-08',
          endTime:'2021-02-09'
        },
      ],
      option: {
        column: [
          {
            label:'开始时间',
            prop:'startTime',
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [{ validator: startTime, trigger: 'blur' },{
              required: true,
              message: "请输入开始时间",
              trigger: "blur"
            }]
          },
          {
            label:'结束时间',
            prop:'endTime',
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [{ validator: endTime, trigger: 'blur' },{
              required: true,
              message: "请输入结束时间",
              trigger: "blur"
            }]
          }
        ]
      },
      tableOption:{
        cellBtn:true,
        addBtn:true,
        addRowBtn:true,
        column: [
          {
            cell:true,
            label:'开始时间',
            prop:'startTime',
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [{ validator: startTime, trigger: 'blur' }],
           // search:true,
          },
          {
            cell:true,
            label:'结束时间',
            prop:'endTime',
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [{ validator: endTime, trigger: 'blur' }],
          //  search:true,
          }
        ]
      },
      activeName:'first'
    }
  },
  methods:{
    onLoad(){
      console.log("**************")
    },
    onLoad1(){
      console.log("******11111*****")
    },
    handleClick(){

    }
  }
}
</script>


<style scoped>

</style>